<template>
  <div>
    <van-nav-bar title="我的收藏" left-arrow @click-left="$router.back()" />


    <van-swipe-cell v-for="item in itemObj" :key="item.id">
      <news-item :news="item"></news-item>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delBtn(item.id)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { myStarFollow,collectArticleDetail} from "../api/user";
import newsItem from'../components/newsItem.vue'

export default {
  components:{newsItem},
  data() {
    return {
       itemObj:[]
    };
  },
    //一点开就显示关注列表
  created(){
    this.myStar()
  },
  methods: {
    myStar(){
      myStarFollow().then(res=>{
        this.itemObj=res.data.data
      })
    },
    delBtn(id){
      collectArticleDetail(id).then(res=>{
        this.myStar()
        this.$toast(res.data.message)
      })
    }
  },
};
</script>

<style lang="less" scoped>
.single {
  padding: 15px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    .content {
      font-size: 14px;
      padding: 0px 5px;
      line-height: 24px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .info {
    font-size: 12px;
    padding-left: 5px;
    color: #999;
    > span:nth-of-type(1) {
      padding-right: 15px;
    }
  }
  img {
    width: 120/360 * 100vw;
    height: 70/360 * 100vw;
    object-fit: cover;
    padding-right: 5px;
  }
  img {
    width: 100px;
  }
}
.delete-button {
  height: 150px;
}
</style>